<template>
  <view class="container">


    <!-- 地址选择 -->
    <view class="address-section" @click="handleSelectAddress">
      <view v-if="!address" class="no-address">
        <uni-icons class="warning-icon" type="info" size="20" color="#ff5a5f" />
        <text class="warning-text">请先添加收货地址</text>
      </view>
      <view v-else class="address-info">
        <view class="user-info">
          <text class="name">{{ address.name }}</text>
          <text class="phone">{{ address.phone }}</text>
        </view>
        <text class="address-detail">{{ address.cont }}</text>
      </view>
      <uni-icons class="arrow-icon" type="right" size="16" color="#999" />
    </view>

    <!-- 商品列表 -->
    <view class="goods-list">
      <view class="goods-item">
        <image class="goods-image" :src="goodsDetail.image" mode="aspectFill" />
        <view class="goods-info">
          <text class="goods-name">{{ goodsDetail.name }}</text>
          <text class="goods-spec">{{ spec }}</text>
          <view class="price-wrap">
            <text class="price-symbol">¥</text>
            <text class="price-value">{{ goodsDetail.price * goodsNum }}</text>
            <view class="flex text-sm text-gray-500 ml-2">
              <text>数量：</text>
              <view class="flex items-center justify-center">

                <wd-input-number v-model="goodsNum" :step="1" :min="1" @change="handleChange" />

              </view>
            </view>
          </view>

        </view>
      </view>
    </view>

    <!-- 底部结算栏 -->
    <view class="footer flex justify-between">
      <view class="total">
        <text>实付金额：</text>
        <text class="price-symbol">¥</text>
        <text class="price-value">{{ goodsDetail.price * goodsNum }}</text>
      </view>
      <button class="submit-btn mx-0" @click="handleSubmit">提交订单</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getAddressListAPI, getGoodsDetailAPI, postOrderQuickOrderAPI } from '@/service/index/index'
import { useRoute } from 'vue-router'
const route = useRoute()
// 商品图片

// 地址信息
const address = ref<{
  name: string
  phone: string
  detail: string
} | null>(null)

const goodsNum = ref(1)
// 返回上一页
const handleBack = () => {
  uni.navigateBack()
}
const handleChange = (value: number) => {
  if (isNaN(value)) {
    return;
  }
  goodsNum.value = value
}

// 选择地址
const handleSelectAddress = () => {
  uni.navigateTo({
    url: '/pages/my/address',
  })
}
//获取地址列表
const getAddressList = async () => {
  const res = await getAddressListAPI()
  console.log(res.data)
  if (res.code === 1) {
    address.value = res.data.find(item => item.is_default == 1)
    console.log(address.value)
  }
}
const id = ref(0)
const goodsDetail = ref({})
const spec = ref('')
const getGoodsDetail = async () => {
  const res = await getGoodsDetailAPI({ id: id.value })
  console.log(res)
  if (res.code === 1) {
    goodsDetail.value = res.data?.info
  }
}

// 提交订单
const handleSubmit = async () => {
  if (!address.value) {
    uni.showToast({
      title: '请先选择收货地址',
      icon: 'none',
    })
    return
  }
  const res = await postOrderQuickOrderAPI({
    goods_id: id.value,
    goods_spec: spec.value,
    address_id: address.value.id,
    goods_num: goodsNum.value
  })
  if (res.code === 1) {
    uni.showToast({
      title: '下单成功',
      icon: 'success',
      duration: 2000,
      success: () => {
        setTimeout(() => {
          // uni.navigateTo({
          //   url: "/pages/my/order_detail?id=" + res.data.order_id + "&sn=" + res.data.sn
          // })
          uni.redirectTo({
            url: "/pages/my/order?status=1"
          })
        }, 2000)
      },
    })
  } else {
    uni.showToast({
      title: res.msg,
      icon: 'none',
    })
  }


}
onShow(() => {
  console.log('onShow')
  getAddressList()
  getGoodsDetail()
})

//#ifdef APP-PLUS || MP-WEIXIN
onLoad((options) => {
  id.value = Number(options.id)
  spec.value = options.spec
  getAddressList()
  getGoodsDetail()
})
//#endif
//#ifdef H5
onMounted(() => {
  id.value = Number(route.query.id)
  spec.value = route.query.spec
  getAddressList()
  getGoodsDetail()
})

//#endif
</script>

<style>
page {
  height: 100%;
  background-color: #f8f8f8;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  height: 88rpx;
  padding: 0 30rpx;
  background-color: #fff;
}

.back-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40rpx;
  height: 40rpx;
}

.title {
  position: absolute;
  left: 50%;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  transform: translateX(-50%);
}

.address-section {
  display: flex;
  align-items: center;
  padding: 30rpx;
  margin-top: 20rpx;
  background-color: #fff;
}

.no-address {
  display: flex;
  flex: 1;
  align-items: center;
}

.warning-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.warning-text {
  font-size: 14px;
  color: #666;
}

.address-info {
  flex: 1;
}

.user-info {
  margin-bottom: 10rpx;
}

.name {
  margin-right: 20rpx;
  font-size: 16px;
  color: #333;
}

.phone {
  font-size: 14px;
  color: #666;
}

.address-detail {
  font-size: 14px;
  line-height: 1.4;
  color: #666;
}

.arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32rpx;
  height: 32rpx;
}

.goods-list {
  padding: 30rpx;
  margin-top: 20rpx;
  background-color: #fff;
}

.goods-item {
  display: flex;
}

.goods-image {
  width: 160rpx;
  height: 160rpx;
  margin-right: 20rpx;
  border-radius: 8rpx;
}

.goods-info {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.goods-name {
  margin-bottom: 10rpx;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
}

.goods-spec {
  margin-bottom: 20rpx;
  font-size: 12px;
  color: #999;
}

.price-wrap {
  display: flex;
  align-items: baseline;
}

.price-symbol {
  font-size: 12px;
  color: #ff5a5f;
}

.price-value {
  font-size: 16px;
  font-weight: 500;
  color: #ff5a5f;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  margin-top: auto;
  background-color: #fff;
}

.total {
  display: flex;
  align-items: baseline;
  font-size: 14px;
  color: #333;
}

.submit-btn {
  width: 240rpx;
  height: 80rpx;
  font-size: 14px;
  line-height: 80rpx;
  color: #fff;
  background-color: #1890ff;
  border-radius: 40rpx;
}

.original-price {
  text-decoration: line-through;
  color: #999;
}

.goods-num-btn {
  width: 30rpx;
  height: 30rpx;
  border-radius: 5rpx;
  font-size: 30px;
  background-color: #fff;
}
</style>
